<template>
	<view class="foot-box">
		<view v-if="!friendHomeMode" class="flex-bottom tabs-list">
			<view class="tab-item item1" @click="handleTabClick('withdraw')">{{ $t('footer.withdraw', 'Withdraw') }}
			</view>
			<view class="tab-item item2" @click="handleTabClick('journal')">{{ $t('footer.journal', 'Journal') }}</view>
			<view class="tab-item item3" @click="handleTabClick('raiders')">{{ $t('footer.raiders', 'Raiders') }}</view>
			<view class="tab-item item4" @click="handleTabClick('emails')">
				<view>{{ $t('footer.emails', 'Emails') }}</view>
			</view>
			<view class="tab-item item5" @click="handleTabClick('rebate')">{{ $t('footer.rebate', 'Rebate') }}</view>
		</view>

		<view v-else class="flex-bottom tabs-list2">
			<view class="tab-item item1" @click="handleBackToMyFarm">{{ $t('footer.my_farm', 'My farm') }}</view>
			<view class="tab-item item2" @click="handleFertilize('fertilize')">{{ $t('footer.fertilize', 'Fertilize') }}
			</view>
			<view class="tab-item item3" @click="handleWatering('watering')">{{ $t('footer.watering', 'Watering') }}
			</view>
		</view>

		<view>
			<view class="footer-list">
				<view class="friends-icon" @click="toggleFriendList">
					<text class="text">{{ $t('footer.friends', 'Friends') }}</text>
				</view>
			</view>

			<view class="friend-list flex-lr" :class="{ hidden: !showFriendList }">
				<view class="left-list flex-top-l">
					<view class="friend-item" v-for="(friend, index) in friendList" :key="index"
						@click="handleFriendItem(friend)">
						<view class="friend-img">
							<image class="img" :src="projectConfig.imgPrefix + friend.avatar"
								mode="aspectFill"></image>
						</view>
						<view class="flex-center name text-overflow" :class="{ top: friend.isTop }">{{ friend.nickname
						}}
						</view>
						<view class="address text-overflow">{{ friend.address }}</view>
					</view>
				</view>
				<view class="right-open" @click="handleFriendList">
					<view class="text">{{ $t('footer.friends_list', 'Friends List') }}</view>
				</view>
			</view>
		</view>

		<!-- 提现弹窗 -->
		<uni-popup ref="withdrawPopup" type="center">
			<view class="withdraw-popup model-content">
				<image class="close-img" src="/static/img/close.png" mode="aspectFit" @click="closeWithdrawPopup">
				</image>
				<view class="tab-box">
					<view class="btn" :class="{ active: withdrawType === 'balance' }"
						@click="handleWithdrawType('balance')">{{ $t('footer.usdt_balance', 'USDT balance') }}</view>
					<view class="btn recharge-text" :class="{ active: withdrawType === 'recharge' }"
						@click="handleWithdrawType('recharge')">{{ $t('footer.recharge', 'Recharge') }}</view>
					<view class="btn" :class="{ active: withdrawType === 'chain' }"
						@click="handleWithdrawType('chain')">{{ $t('footer.on_chain_usdt', 'On-chain USDT') }}</view>
				</view>
				<view class="title">{{ $t('footer.withdraw', 'Withdraw') }}</view>
				<view v-if="withdrawType === 'balance'" class="contents">
					<view class="record-skip" @click="handleTabClick('withdrawRecord')">
						<image class="withdraw-log" src="/static/img/withdraw-log.png" mode="aspectFit"></image>
						<view class="text">{{ $t('footer.record', 'Record') }}</view>
					</view>
					<view class="flex-l re-name">
						<image class="dbx-icon" src="/static/img/icon-list-item.png" mode="aspectFit"></image>
						<view>{{ $t('footer.usdt_balance', 'USDT Balance') }}:</view>
					</view>
					<view class="num">{{ Number(userInfo.usdt_balance).toFixed(2) }} USDT</view>
					<view class="flex-l re-name">
						<image class="dbx-icon" src="/static/img/icon-list-item.png" mode="aspectFit"></image>
						<view>{{ $t('footer.chain_address', 'Chain address') }}:</view>
					</view>
					<view class="flex-l num">
						<view class="address text-overflow">{{ chainAddress }}</view>
						<image class="copy-icon" src="/static/img/icon-copy.png" mode="aspectFit" @click="copyAddress">
						</image>
					</view>
					<view class="flex-l re-name">
						<image class="dbx-icon" src="/static/img/icon-list-item.png" mode="aspectFit"></image>
						<view>{{ $t('footer.withdrawal_amount', 'Withdrawal Amount') }}:</view>
					</view>
					<view class="num">
						<view class="inp-wrap flex-lr">
							<input class="input" v-model="withdrawAmount"
								:placeholder="$t('footer.minimum_amount', 'Minimum amount') + `:${systemConfig.min_withdrawal_limit}USDT`" type="number" />
							<view class="all flex-center" @click="setAllAmount">{{ $t('footer.all', 'ALL') }}</view>
						</view>
						<view class="fee-text">{{ $t('footer.handling_fee', 'Handling fee') }}: {{
							systemConfig.apply_amount * 100 }}%</view>
					</view>
					<view class="flex-l re-name">
						<image class="dbx-icon" src="/static/img/icon-list-item.png" mode="aspectFit"></image>
						<view>{{ $t('footer.actual_amount', 'Actual amount') }}：</view>
						<view class="num" style="margin-bottom: 0px; padding: 0px;">{{ actualAmount }} USDT</view>
					</view>
					<view class="btn" @click="handleWithdraw">{{ $t('footer.withdraw', 'Withdraw') }}</view>
				</view>
				<view v-if="withdrawType === 'recharge'" class="contents">
					<view class="recharge-address flex-center">{{ $t('footer.recharge_address', 'Recharge address') }}
					</view>
					<view class="flex-center recharge-address-wallet" style="padding-left: 0px;">
						<view class="address-wallet">
							<view class="wallet-title">{{ $t('footer.address', 'address') }}：</view>
							<view class="wallet-text">{{ systemConfig.to_address }}</view>
						</view>
						<image class="copy-icon" src="/static/img/icon-copy.png" mode="aspectFit"
							@click="copyRechargeAddress"></image>
					</view>
					<view class="flex-l re-name" style="margin-top: 40rpx;">
						<image class="dbx-icon" src="/static/img/icon-list-item.png" mode="aspectFit"></image>
						<view>{{ $t('footer.recharge_amount_label', 'Recharge amount') }}:</view>
					</view>
					<view class="inp-wrap flex-lr" style="margin-top: 40rpx;">
						<input class="input" v-model="rechargeAmount"
							:placeholder="$t('footer.recharge_amount', 'Please enter the recharge amount')"
							type="number" />
					</view>
					<view class="btn" style="margin-top: 40rpx;" @click="handleRecharge">{{ $t('footer.recharge', 'Recharge') }}</view>
					<!-- <view class="flex-center" style="padding-left: 0px;">
						<view class="recharge-prompt">{{ $t('footer.recharge_completed', '!!! Recharge completed, please contact customer service') }}</view>
					</view> -->
				</view>
				<view v-if="withdrawType === 'chain'" class="contents">
					<view class="re-name flex-center">{{ $t('footer.wallet_address', 'Wallet address') }}</view>
					<view class="flex-center num" style="padding-left: 0px;">
						<view class="address text-overflow">{{ chainAddress }}</view>
					</view>
					<view class="re-name flex-center" style="margin-top: 31px;">{{ $t('footer.wallet_balance', 'Wallet balance') }}</view>
					<view class="num flex-center" style="padding-left: 0px;">{{ walletBalance }} USDT</view>
				</view>
			</view>
		</uni-popup>

		<!-- 提现记录弹窗 -->
		<uni-popup ref="withdrawRecordPopup" type="center">
			<view class="withdraw-record-popup-box model-content">
				<image class="close-img" src="/static/img/close.png" mode="aspectFit" @click="closeWithdrawRecordPopup">
				</image>
				<view class="title">{{ $t('footer.withdrawals_record', 'Withdrawals record') }}</view>
				<view class="contents">
					<template v-if="withdrawRecordData.length > 0">
						<view class="lists" v-for="(item, index) in withdrawRecordData" :key="index">
							<view class="record-header flex-lr">
								<view class="user-info">
									<view class="event-type-inline">{{ getEventTypeText(item.eventType) }}：</view>
									<view class="item-name">{{ item.itemName }}</view>
								</view>
								<view class="amount">{{ item.usdt }} USDT</view>
							</view>
							<view class="record-details">
								<view class="timers">{{ item.createTime }}</view>
							</view>
						</view>
					</template>
					<view class="no-data" v-else>
						<image class="img" src="/static/img/wralog-no.png" mode="aspectFit" style="height: 80px;">
						</image>
						<view class="no-text">{{ $t('bulletin.no_records', 'No records') }}</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 日志弹窗 -->
		<uni-popup ref="journalPopup" type="center">
			<view class="journal-popup-box model-content">
				<image class="close-img" src="/static/img/close.png" mode="aspectFit" @click="closeJournalPopup">
				</image>
				<view class="title">{{ $t('footer.journal', 'Journal') }}</view>
				<view class="flex-l tag-wrapper">
					<view class="tag-item" v-for="(item, index) in tagList" :key="index" @click="handleTagClick(index)"
						:class="{ active: tagIndex === index }">
						{{ item }}
					</view>
				</view>
				<view class="contents">
					<template v-if="tagIndex === 0 && landLogData.length > 0">
						<view class="lists" v-for="(item, index) in landLogData" :key="index">
							<view class="flex-l names-top">{{ item.description }}</view>
							<view class="flex-l timers">{{ item.createTime }}</view>
						</view>
					</template>
					<template v-else-if="tagIndex === 1 && storehouseLogData.length > 0">
						<view class="lists" v-for="(item, index) in storehouseLogData" :key="index">
							<view class="flex-l names-top">{{ item.description }}</view>
							<view class="flex-l timers">{{ item.createTime }}</view>
						</view>
					</template>
					<template v-else-if="tagIndex === 2 && storeLogData.length > 0">
						<view class="lists" v-for="(item, index) in storeLogData" :key="index">
							<view class="flex-l names-top">{{ item.description }}</view>
							<view class="flex-l timers">{{ item.createTime }}</view>
						</view>
					</template>
					<template v-else-if="tagIndex === 3 && cropLogData.length > 0">
						<view class="lists" v-for="(item, index) in cropLogData" :key="index">
							<view class="flex-l names-top">{{ item.description }}</view>
							<view class="flex-l timers">{{ item.createTime }}</view>
						</view>
					</template>
					<view class="no-data" v-else>
						<image class="img" src="/static/img/wralog-no.png" mode="aspectFit" style="height: 80px;">
						</image>
						<view class="no-text">{{ $t('bulletin.no_records', 'No records') }}</view>
					</view>
				</view>
				<view v-if="total > 0" class="flex-center page-box">
					<view class="page-list flex-center" :class="{ loading: paginationLoading }">
						<image class="list-page" :class="{ disabled: currentPage <= 1 || paginationLoading }" 
							src="/static/img/arrow-prev-page.png" mode="aspectFit"
							style="width: 28px;" @click="handleJournalPrevPage"></image>
						
						<!-- 分页器逻辑 -->
						<template v-if="totalPage <= 10">
							<!-- 总页数小于等于10页时，显示所有页码 -->
							<view class="sum flex-center" 
								v-for="index in Array.from({ length: totalPage }, (_, i) => i + 1)" 
								:key="index"
								:class="{ active: currentPage === index }"
								@click="handleJournalGoToPage(index)">{{ index }}</view>
						</template>
						<template v-else>
							<!-- 总页数大于10页时，使用省略号显示 -->
							<!-- 始终显示第1页 -->
							<view class="sum flex-center" 
								:class="{ active: currentPage === 1 }"
								@click="handleJournalGoToPage(1)">1</view>
							
							<!-- 左侧省略号 -->
							<view v-if="currentPage > 4" class="sum ellipsis">...</view>
							
							<!-- 当前页附近的页码 -->
							<template v-for="page in getVisiblePages()" :key="page">
								<view class="sum flex-center" 
									:class="{ active: currentPage === page }"
									@click="handleJournalGoToPage(page)">{{ page }}</view>
							</template>
							
							<!-- 右侧省略号 -->
							<view v-if="currentPage < totalPage - 3" class="sum ellipsis">...</view>
							
							<!-- 始终显示最后一页 -->
							<view v-if="totalPage > 1" class="sum flex-center" 
								:class="{ active: currentPage === totalPage }"
								@click="handleJournalGoToPage(totalPage)">{{ totalPage }}</view>
						</template>
						
						<image class="list-page" :class="{ disabled: currentPage >= totalPage }"
							src="/static/img/arrow-next-page.png" mode="aspectFit"
							style="width: 28px;" @click="handleJournalNextPage"></image>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 农作物说明弹窗 -->
		<uni-popup ref="raidersPopup" type="center">
			<view class="raiders-popup-box model-content">
				<view class="close-img" @click="closeRaidersPopup">
				</view>
				<view class="title">{{ $t('footer.raiders', 'Raiders') }}</view>
				<view class="contents">
					<template v-if="isViewRaidersContent">
						<view class="ra-text">{{ currentRaidersData.title }}</view>
						<view class="ra-title" v-html="currentRaidersData.content"></view>
					</template>
					<template v-else>
						<view class="lists flex-lr" v-for="(item, index) in raidersData" :key="index"
							@click="handleRaidersItem(item.id)">
							<view class="text-overflow">{{ item.title }}</view>
							<image class="rights" src="/static/img/arrow-right.png" mode="aspectFit"
								style="width: 7.2px;">
							</image>
						</view>
					</template>
				</view>
				<template v-if="isViewRaidersContent">
					<view class="flex-l return-text" @click="handleRaidersBack">
						<image class="img" style="transform: rotate(180deg);" src="/static/img/arrow-right.png"
							mode="aspectFit" />
						<view class="text">{{ $t('footer.back', 'Back') }}</view>
					</view>
				</template>
				<template v-else>
					<view v-if="raidersData.length > 0 && raidersTotal > 0" class="flex-center page-box">
						<view class="page-list flex-center">
							<image class="list-page" :class="{ disabled: raidersCurrentPage <= 1 }" 
								src="/static/img/arrow-prev-page.png" mode="aspectFit"
								style="width: 28px;" @click="handlePrevPage"></image>
							
							<!-- 分页器逻辑 -->
							<template v-if="raidersTotalPage <= 10">
								<view class="sum flex-center" 
									v-for="index in Array.from({ length: raidersTotalPage }, (_, i) => i + 1)" 
									:key="index"
									:class="{ active: raidersCurrentPage === index }"
									@click="handleRaidersGoToPage(index)">{{ index }}</view>
							</template>
							<template v-else>
								<view class="sum flex-center" 
									:class="{ active: raidersCurrentPage === 1 }"
									@click="handleRaidersGoToPage(1)">1</view>
								<view v-if="raidersCurrentPage > 4" class="sum ellipsis">...</view>
								<template v-for="page in getRaidersVisiblePages()" :key="page">
									<view class="sum flex-center" 
										:class="{ active: raidersCurrentPage === page }"
										@click="handleRaidersGoToPage(page)">{{ page }}</view>
								</template>
								<view v-if="raidersCurrentPage < raidersTotalPage - 3" class="sum ellipsis">...</view>
								<view v-if="raidersTotalPage > 1" class="sum flex-center" 
									:class="{ active: raidersCurrentPage === raidersTotalPage }"
									@click="handleRaidersGoToPage(raidersTotalPage)">{{ raidersTotalPage }}</view>
							</template>
							
							<image class="list-page" :class="{ disabled: raidersCurrentPage >= raidersTotalPage }"
								src="/static/img/arrow-next-page.png" mode="aspectFit"
								style="width: 28px;" @click="handleNextPage"></image>
						</view>
					</view>
				</template>
			</view>
		</uni-popup>

		<!-- 邮件弹窗 -->
		<uni-popup ref="emailsPopup" type="center">
			<view class="email-popup-box model-content">
				<image class="close-img" src="/static/img/close.png" mode="aspectFit" @click="closeEmailPopup"></image>
				<view class="contents">
					<view class="no-data">
						<image class="img" src="/static/img/none-gg.png" mode="aspectFit" style="height: 110px;">
						</image>
						<view class="no-text">{{ $t('footer.no_mail', 'No mail') }}</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 返利弹窗 -->
		<uni-popup ref="rebatePopup" type="center">
			<view class="rebate-popup-box model-content">
				<image class="close-img" src="/static/img/close.png" mode="aspectFit" @click="closeRebatePopup"></image>
				<view class="title">{{ $t('footer.rebate_record', 'Rebate record') }}</view>
				<view class="contents">
					<view class="no-data">
						<image class="img" src="/static/img/wralog-no.png" mode="aspectFit" style="height: 80px;">
						</image>
						<view class="no-text">No records</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { systemApi } from '@/request/system'
import { userApi } from '@/request/user'
import projectConfig from '@/config/project.json'
import { languageMixin } from '@/utils/language-mixin.js'
import dayjs from 'dayjs'

export default {
	name: 'FootBox',
	mixins: [languageMixin],
	data() {
		return {
			projectConfig,
			showFriendList: false,
			friendList: [],
			withdrawRecordData: [],
			landLogData: [],
			storeLogData: [],
			cropLogData: [],
			storehouseLogData: [],
			raidersData: [],
			raidersId: null,
			currentRaidersData: {},
			isViewRaidersContent: false,
			withdrawType: 'balance', // 'balance', 'recharge', 'chain'
			usdtBalance: 0.00, // Placeholder for USDT balance
			withdrawAmount: 0, // Amount to withdraw
			minWithdrawAmount: 4, // Minimum withdraw amounts
			currentPage: 1, // Current page for raiders popup
			pageSize: 10, // Current page size
			total: 0,
			totalPage: 0,
			walletBalance: 0.00, // Wallet balance
			rechargeAmount: 0, // Recharge amount
			tagList: ['Land', 'Backpack', 'Store', 'Crop'],
			tagIndex: 0,
			jumpPage: '', // 跳转页面输入值
			raidersCurrentPage: 1, // raiders当前页
			raidersTotal: 0, // raiders总条数
			raidersTotalPage: 0, // raiders总页数
			raidersJumpPage: '', // raiders跳转页面输入值
			paginationLoading: false, // 分页加载状态
			debounceTimer: null // 防抖定时器
		}
	},
	computed: {
		...mapState('user', ['userInfo', 'friendHomeMode']),
		...mapState('app', ['systemConfig']),
		chainAddress() {
			return this.userInfo.address.slice(0, 8) + '...' + this.userInfo.address.slice(-8)
		},
		actualAmount() {
			if (!this.withdrawAmount || this.withdrawAmount <= 0) {
				return '0.00'
			}
			return (Number(this.withdrawAmount) * 0.8).toFixed(2) // 扣除20%手续费
		}
	},
	mounted() {
	},
	methods: {
		...mapActions('user', ['setFriendHomeMode', 'setUserInfo']),
		async getFriendList() {
			const res = await userApi.getFriendList()
			if (res && res.code === 200) {
				this.friendList = res.rows || []
			}
		},
		async getWithdrawRecord() {
			try {
				const res = await systemApi.getWithdrawRecord()
				if (res && res.code === 200) {
					this.withdrawRecordData = res.rows || []
				}
			} catch (error) {
				console.log(error)
			}
		},
		async getLandLog() {
			const res = await systemApi.getLandLog({
				pageNum: this.currentPage,
				pageSize: this.pageSize
			})
			if (res && res.code === 200) {
				this.landLogData = res.rows.map(item => {
					let description = ''
					if (item.itemType === 'plant') { // 种植
						description = `land number ${item.landNo} ${this.$t('log.' + item.itemType)} ${this.$t(item.languagekey, item.seedName)} + 1`
					} else if (item.itemType === '1') { // 施肥
						description = `land number ${item.landNo} ${this.$t('log.' + item.itemType)}`
					} else if (item.itemType === '3') { // 除虫
						description = `land number ${item.landNo} ${this.$t('log.' + item.itemType)} ${this.$t(item.languagekey, item.seedName)}`
					} else if (item.itemType === 'pay') { // 除草
						description = `land number ${item.landNo} ${this.$t('log.' + item.itemType)} ${this.$t(item.languagekey, item.seedName)}`
					} else if (item.itemType === 'harvest') { // 收获
						description = `land number ${item.landNo} ${this.$t('log.' + item.itemType)} ${this.$t(item.languagekey, item.seedName)}`
					}
					return {
						createTime: item.createTime,
						description: description
					}
				}) || []
				this.total = res.total || 0
				this.totalPage = Math.ceil(res.total / this.pageSize) || 0
			}
		},
		async getStorehouseLog() {
			const res = await systemApi.getStorehouseLog({
				pageNum: this.currentPage,
				pageSize: this.pageSize
			})
			if (res && res.code === 200) {
				this.storehouseLogData = res.rows.map(item => {
					let description = ''
					description = `${this.$t(item.languagekey, item.seedName)} ${item.num > 0 ? '+' + item.num : item.num}`
					return {
						createTime: item.createTime,
						description: description
					}
				}) || []
				this.total = res.total || 0
				this.totalPage = Math.ceil(res.total / this.pageSize) || 0
			}
		},
		async getStoreLog() {
			const res = await systemApi.getStoreLog({
				pageNum: this.currentPage,
				pageSize: this.pageSize
			})
			if (res && res.code === 200) {
				this.storeLogData = res.rows.map(item => {
					let description = ''
					description = `${this.$t('log.purchase')} ${item.stock} ${this.$t(item.languagekey, item.seedName)}`
					return {
						createTime: item.createTime,
						description: description
					}
				}) || []
				this.total = res.total || 0
				this.totalPage = Math.ceil(res.total / this.pageSize) || 0
			}
		},
		async getCropLog() {
			const cropLogRes = await systemApi.getCropLog({
				pageNum: this.currentPage,
				pageSize: this.pageSize
			})
			if (cropLogRes && cropLogRes.code === 200) {
				this.cropLogData = cropLogRes.rows.map(item => {
					let description = ''
					description = `${this.$t('log.pay')} ${item.num} ${this.$t(item.language_key, item.seed_name)} `
					return {
						createTime: dayjs(item.create_time).format('YYYY-MM-DD HH:mm:ss'),
						description: description
					}
				}) || []
				this.total = cropLogRes.rows.length || 0
				this.totalPage = Math.ceil(this.total / this.pageSize) || 0
			}
		},
		handleJournalPrevPage() {
			if (this.currentPage <= 1) return
			this.currentPage--
			this.loadCurrentPageData()
		},
		handleJournalNextPage() {
			if (this.currentPage >= this.totalPage) return
			this.currentPage++
			this.loadCurrentPageData()
		},
		handleJournalGoToPage(page) {
			if (page < 1 || page > this.totalPage || page === this.currentPage) return
			this.currentPage = page
			this.loadCurrentPageData()
		},
		handleJournalJumpToPage() {
			const page = parseInt(this.jumpPage)
			if (isNaN(page) || page < 1 || page > this.totalPage) {
				uni.showToast({
					title: `请输入1-${this.totalPage}之间的页码`,
					icon: 'none'
				})
				return
			}
			this.currentPage = page
			this.jumpPage = ''
			this.loadCurrentPageData()
		},
		// 键盘快捷键支持
		handleJournalKeyDown(event) {
			if (event.key === 'ArrowLeft' && this.currentPage > 1) {
				this.handleJournalPrevPage()
			} else if (event.key === 'ArrowRight' && this.currentPage < this.totalPage) {
				this.handleJournalNextPage()
			} else if (event.key === 'Home') {
				this.handleJournalGoToPage(1)
			} else if (event.key === 'End') {
				this.handleJournalGoToPage(this.totalPage)
			}
		},
		loadCurrentPageData() {
			// 防抖处理
			if (this.debounceTimer) {
				clearTimeout(this.debounceTimer)
			}
			
			this.debounceTimer = setTimeout(() => {
				this.paginationLoading = true
				
				let promise
				if (this.tagIndex === 0) {
					promise = this.getLandLog()
				} else if (this.tagIndex === 1) {
					promise = this.getStorehouseLog()
				} else if (this.tagIndex === 2) {
					promise = this.getStoreLog()
				} else if (this.tagIndex === 3) {
					promise = this.getCropLog()
				}
				
				// 确保加载状态至少显示300ms，避免闪烁
				Promise.all([
					promise,
					new Promise(resolve => setTimeout(resolve, 300))
				]).finally(() => {
					this.paginationLoading = false
				})
			}, 150) // 150ms防抖延迟
		},
		getVisiblePages() {
			const pages = []
			const start = Math.max(2, this.currentPage - 1)
			const end = Math.min(this.totalPage - 1, this.currentPage + 1)
			
			// 确保当前页附近至少显示3个页码
			let actualStart = start
			let actualEnd = end
			
			if (this.currentPage <= 3) {
				actualEnd = Math.min(this.totalPage - 1, 4)
			} else if (this.currentPage >= this.totalPage - 2) {
				actualStart = Math.max(2, this.totalPage - 3)
			}
			
			for (let i = actualStart; i <= actualEnd; i++) {
				if (i > 1 && i < this.totalPage) {
					pages.push(i)
				}
			}
			return pages
		},
		handleTagClick(index) {
			this.totalPage = []
			this.total = 0
			this.tagIndex = index
			this.currentPage = 1
			if (index === 0) {
				this.getLandLog()
			} else if (index === 1) {
				this.getStorehouseLog()
			} else if (index === 2) {
				this.getStoreLog()
			} else if (index === 3) {
				this.getCropLog()
			}
		},
		async getRaiders() {
			const res = await systemApi.getRaiders({
				pageNum: this.raidersCurrentPage,
				pageSize: this.pageSize
			})
			if (res && res.code === 200) {
				this.raidersData = res.data || res.rows || []
				this.raidersTotal = res.total || this.raidersData.length
				this.raidersTotalPage = Math.ceil(this.raidersTotal / this.pageSize) || 1
			}
		},
		handleTabClick(tab) {
			if (tab === 'journal') {
				this.getLandLog()
			} else if (tab === 'raiders') {
				this.getRaiders()
			} else if (tab === 'withdrawRecord') {
				this.getWithdrawRecord()
			}
			this.$refs[tab + 'Popup'].open();
		},
		toggleFriendList() {
			this.showFriendList = !this.showFriendList;
			if (this.showFriendList) {
				this.getFriendList()
			}
		},
		handleFriendList() {
			this.$emit('friend-list');
		},
		closeWithdrawPopup() {
			this.$refs.withdrawPopup.close();
		},
		async handleWithdrawType(type) {
			this.withdrawType = type;
			this.withdrawAmount = 0; // Reset amount when changing type
			this.actualAmount = 0;

			if (type === 'chain') {
				if (typeof window.ethereum === 'undefined') {
					uni.showToast({
						title: this.$t('messages.please_install_metamask', 'Please install MetaMask'),
						icon: 'none'
					});
					return;
				}
				const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });

				// 获取当前账户
				const account = accounts[0];
				console.log('account:', account)
				// 获取余额
				const balance = await window.ethereum.request({
					method: 'eth_getBalance',
					params: [account, 'latest']
				});
				console.log('balance:', balance)

				if (!balance) {
					uni.showToast({
						title: this.$t('messages.no_balance', 'No balance'),
						icon: 'none'
					});
					return;
				}

				// 将余额从wei转换为ETH
				const balanceInEth = parseInt(balance) / 1e18;

				// 显示余额，保留4位小数
				this.walletBalance = `${balanceInEth.toFixed(2)}`;
			}
		},
		copyAddress() {
			const _this = this
			uni.setClipboardData({
				data: this.userInfo.address,
				success: function () {
					uni.showToast({
						title: _this.$t('messages.address_copied', 'Address copied'),
						icon: 'none'
					});
				},
				fail: function () {
					uni.showToast({
						title: _this.$t('messages.copy_failed', 'Copy failed'),
						icon: 'none'
					})
				}
			});
		},
		copyRechargeAddress() {
			const _this = this
			uni.setClipboardData({
				data: this.systemConfig.to_address,
				success: function () {
					uni.showToast({
						title: _this.$t('messages.address_copied', 'Address copied'),
						icon: 'none'
					});
				},
				fail: function () {
					uni.showToast({
						title: _this.$t('messages.copy_failed', 'Copy failed'),
						icon: 'none'
					})
				}
			});
		},
		setAllAmount() {
			this.withdrawAmount = Number(this.userInfo.usdt_balance).toFixed(2);
		},
		async handleWithdraw() {
			if (!this.withdrawAmount || this.withdrawAmount <= 0) {
				uni.showToast({
					title: this.$t('footer.please_enter_withdraw_amount', '请输入提现金额'),
					icon: 'none'
				});
				return;
			}

			if (this.withdrawAmount < this.systemConfig.min_withdrawal_limit) {
				uni.showToast({
					title: this.$t('footer.minimum_withdraw_error', `最低提现金额为 ${this.systemConfig.min_withdrawal_limit} USDT`),
					icon: 'none'
				});
				return;
			}

			if (this.withdrawAmount > Number(this.userInfo.usdt_balance)) {
				uni.showToast({
					title: this.$t('footer.insufficient_balance', 'USDT余额不足'),
					icon: 'none'
				});
				return;
			}

			try {
				// 生成提现订单
				const withdrawRes = await userApi.createWithdrawOrder({
					applyAmount: this.withdrawAmount,
					currency: 'USDT'
				});

				if (withdrawRes && withdrawRes.code === 200) {
					uni.showToast({
						title: this.$t('footer.withdraw_submitted', 'Withdrawal request submitted, please wait for review'),
						icon: 'none'
					});

					// 关闭弹窗
					this.$refs.withdrawPopup.close();

					// 重置提现金额
					this.withdrawAmount = 0;

					// 更新用户信息
					const userInfoRes = await userApi.getUserInfo();
					if (userInfoRes && userInfoRes.code === 200) {
						this.setUserInfo(userInfoRes.data);
					}
				} else {
					uni.showToast({
						title: withdrawRes.message || this.$t('footer.withdraw_failed', 'Withdrawal request failed'),
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('Withdraw error:', error);
				uni.showToast({
					title: this.$t('footer.withdraw_failed', 'Withdrawal request failed'),
					icon: 'none'
				});
			}
		},
		async handleRecharge() {
			if (!this.rechargeAmount || this.rechargeAmount <= 0) {
				uni.showToast({
					title: this.$t('footer.please_enter_amount', 'Please enter the recharge amount'),
					icon: 'none'
				});
				return;
			}

			// 检查是否安装了MetaMask
			if (typeof window.ethereum === 'undefined') {
				uni.showToast({
					title: this.$t('messages.please_install_metamask', 'Please install MetaMask'),
					icon: 'none'
				});
				return;
			}

			try {
				// 生成充值订单
				const orderRes = await userApi.createDepositOrder({
					amount: this.rechargeAmount
				});

				if (orderRes && orderRes.code === 200) {
					// 调起MetaMask支付
					await this.processMetaMaskPayment(orderRes.data);
				} else {
					uni.showToast({
						title: orderRes.message || this.$t('footer.order_failed', 'Order creation failed'),
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('Recharge error:', error);
				uni.showToast({
					title: this.$t('footer.recharge_failed', 'Recharge failed'),
					icon: 'none'
				});
			}
		},

		async processMetaMaskPayment(orderData) {
			try {
				// 请求账户权限
				const accounts = await window.ethereum.request({
					method: 'eth_requestAccounts'
				});

				if (!accounts || accounts.length === 0) {
					uni.showToast({
						title: this.$t('messages.no_account', 'Please connect MetaMask account'),
						icon: 'none'
					});
					return;
				}

				// 构建交易参数
				const transactionParameters = {
					to: this.systemConfig.to_address, // 充值地址
					from: accounts[0], // 用户钱包地址
					value: '0x' + (parseFloat(this.rechargeAmount) * Math.pow(10, 18)).toString(16), // 转换为wei
					gas: '0x5208', // 21000 gas limit
					gasPrice: '0x09184e72a000', // 10 gwei
				};

				// 发送交易
				const txHash = await window.ethereum.request({
					method: 'eth_sendTransaction',
					params: [transactionParameters],
				});

				if (txHash) {
					uni.showToast({
						title: this.$t('messages.payment_sent', 'Payment sent'),
						icon: 'success'
					});

					// 关闭弹窗
					this.$refs.withdrawPopup.close();

					// 重置充值金额
					this.rechargeAmount = 0;

					console.log('Transaction hash:', txHash);
					console.log('Order data:', orderData);
				}
			} catch (error) {
				console.error('MetaMask payment error:', error);

				if (error.code === 4001) {
					// 用户拒绝交易
					uni.showToast({
						title: this.$t('messages.payment_rejected', 'User canceled payment'),
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: this.$t('messages.payment_failed', 'Payment failed'),
						icon: 'none'
					});
				}
			}
		},
		closeJournalPopup() {
			this.$refs.journalPopup.close();
			this.tagIndex = 0
		},
		closeRaidersPopup() {
			this.$refs.raidersPopup.close();
		},
		handleRaidersItem(id) {
			this.isViewRaidersContent = true
			this.currentRaidersData = this.raidersData.find(item => item.id === id)
		},
		handlePrevPage() {
			if (this.raidersCurrentPage <= 1) return
			this.raidersCurrentPage--
			this.getRaiders()
		},
		handleNextPage() {
			if (this.raidersCurrentPage >= this.raidersTotalPage) return
			this.raidersCurrentPage++
			this.getRaiders()
		},
		handleRaidersGoToPage(page) {
			if (page < 1 || page > this.raidersTotalPage || page === this.raidersCurrentPage) return
			this.raidersCurrentPage = page
			this.getRaiders()
		},
		handleRaidersJumpToPage() {
			const page = parseInt(this.raidersJumpPage)
			if (isNaN(page) || page < 1 || page > this.raidersTotalPage) {
				uni.showToast({
					title: `Please enter the page number between 1 and ${this.raidersTotalPage}`,
					icon: 'none'
				})
				return
			}
			this.raidersCurrentPage = page
			this.raidersJumpPage = ''
			this.getRaiders()
		},
		getRaidersVisiblePages() {
			const pages = []
			const start = Math.max(2, this.raidersCurrentPage - 1)
			const end = Math.min(this.raidersTotalPage - 1, this.raidersCurrentPage + 1)
			
			let actualStart = start
			let actualEnd = end
			
			if (this.raidersCurrentPage <= 3) {
				actualEnd = Math.min(this.raidersTotalPage - 1, 4)
			} else if (this.raidersCurrentPage >= this.raidersTotalPage - 2) {
				actualStart = Math.max(2, this.raidersTotalPage - 3)
			}
			
			for (let i = actualStart; i <= actualEnd; i++) {
				if (i > 1 && i < this.raidersTotalPage) {
					pages.push(i)
				}
			}
			return pages
		},
		closeEmailPopup() {
			this.$refs.emailsPopup.close();
		},
		closeRebatePopup() {
			this.$refs.rebatePopup.close();
		},
		handleRaidersBack() {
			this.isViewRaidersContent = false
		},
		closeWithdrawRecordPopup() {
			this.$refs.withdrawRecordPopup.close();
		},
		async handleFriendItem(friend) {
			this.setFriendHomeMode(true)
			console.log('friend:', friend)
			const friendLandListRes = await userApi.getFriendLandList(friend.id)
			if (friendLandListRes && friendLandListRes.code === 200) {
				console.log('friendLandListRes:', friendLandListRes)
			}
		},
		async handleBackToMyFarm() {
			this.setFriendHomeMode(false)
			const userInfoRes = await userApi.getUserInfo()
			if (userInfoRes && userInfoRes.code === 200) {
				this.setUserInfo(userInfoRes.data)
			}
		},
		handleFertilize(fertilize) {
			uni.showToast({
				title: this.$t('messages.cannot_fertilize', 'This state cannot be fertilized'),
				icon: 'none'
			})
		},
		handleWatering(watering) {
			uni.showToast({
				title: this.$t('messages.cannot_water', 'This state cannot be watered'),
				icon: 'none'
			})
		},
		getEventTypeText(eventType) {
			switch (eventType) {
				case 'shop':
					return this.$t('footer.shop', 'Store transaction')
				case 'harvest':
					return this.$t('footer.harvest', 'Harvest')
				case 'withdraw':
					return this.$t('footer.withdrawal', 'Withdrawal')
				case 'recharge':
					return this.$t('footer.recharge', 'Recharge')
				case 'transfer':
					return this.$t('footer.transfer', 'Transfer')
				default:
					return eventType
			}
		}
	}
}
</script>

<style scoped lang="scss">
.foot-box {
	width: 100%;
	position: fixed;
	margin: 0 auto;
	z-index: 91;
	bottom: 17px;
	padding: 0 9px;
	box-sizing: border-box;

	.tabs-list {
		width: 100%;
		margin-bottom: 28px;
		height: 62px;

		.tab-item {
			width: 58px;
			height: 59px;
			padding-top: 34px;
			box-sizing: border-box;
			color: #fff;
			font-size: 9px;
			font-weight: 700;
			text-align: center;
			position: relative;
			// z-index: 2300;

			&.item1 {
				height: 104px;
				padding-top: 81px;
				width: 76px;
				padding-left: 4px;
				box-sizing: border-box;
				background: url(/static/img/foot1.png) no-repeat;
				background-size: 100%;
			}

			&.item2 {
				height: 56px;
				background: url(/static/img/foot2.png) no-repeat;
				background-size: 100%;
			}

			&.item3 {
				background: url(/static/img/foot3.png) no-repeat;
				background-size: 100%;
				padding-top: 37px;
			}

			&.item4 {
				height: 52px;
				background: url(/static/img/foot4.png) no-repeat;
				background-size: 100%;
				padding-top: 30px;
			}

			&.item5 {
				height: 54px;
				background: url(/static/img/foot5.png) no-repeat;
				background-size: 100%;
				padding-top: 32px;
			}
		}
	}

	.tabs-list2 {
		width: 100%;
		margin-bottom: 28px;
		height: 62px;
		padding: 0 52px;

		.tab-item {
			width: 80px;
			height: 70px;
			padding-top: 47px;
			box-sizing: border-box;
			color: #fff;
			font-size: 9px;
			font-weight: 700;
			text-align: center;
			position: relative;
			z-index: 2300;

			&.item1 {
				background: url(/static/img/myFarm.png) no-repeat;
				background-size: auto 100%;
			}

			&.item2 {
				background: url(/static/img/fertilize.png) no-repeat;
				background-size: auto 100%;
			}

			&.item3 {
				background: url(/static/img/watering.png) no-repeat;
				background-size: auto 100%;
			}
		}
	}

	.footer-list {
		display: flex;
		align-items: center;
		position: relative;
	}

	.friends-icon {
		width: 58px;
		height: 58px;
		background: url(/static/img/foot6.png) no-repeat 50%;
		background-size: 100% 100%;
		padding-top: 28px;
		margin-left: 6px;

		.text {
			color: #fff;
			font-size: 9px;
			font-weight: 700;
		}
	}

	.friend-list {
		width: 100%;
		background: rgba(167, 246, 164, 0.5);
		border-radius: 10px;
		padding: 8px 6px;
		box-sizing: border-box;
		position: relative;

		.left-list {
			width: calc(100% - 38px);
			height: 87px;
			background: #fff;
			box-shadow: 0 0 3px 0 rgba(36, 102, 35, 0.24);
			border-radius: 6px;
			padding: 6px;
			padding-left: 10px;
			box-sizing: border-box;
			flex-wrap: nowrap;
			overflow: scroll;

			.friend-item {
				width: 62px;
				margin-right: 15px;
				text-align: center;

				&:last-child {
					margin-right: 0;
				}

				.friend-img {
					width: 47px;
					height: 47px;
					border-radius: 50%;
					border: 2px solid #4f9633;
					margin: 0 auto;
					text-align: center;
					overflow: hidden;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						text-align: center;
					}
				}

				.name {
					width: 61px;
					height: 20px;
					background: #4f9633;
					border-radius: 10px;
					color: #fff;
					font-size: 12px;
					font-weight: 700;
					padding: 0 4px;
					box-sizing: border-box;
					margin-top: -12px;
					position: relative;
					z-index: 1;

					&.top {
						background: #5eaaeb;
					}
				}

				.address {
					color: #242424;
					font-size: 12px;
					font-weight: 700;

					&.active {
						color: #4f9633;
					}
				}
			}
		}

		.right-open {
			width: 32px;
			height: 87px;
			background: #fff;
			box-shadow: 0 0 3px 0 rgba(36, 102, 35, 0.24);
			border-radius: 6px;
			padding: 6px;
			box-sizing: border-box;

			.text {
				color: #2c6226;
				font-size: 13px;
				font-weight: 700;
				transform: rotate(90deg);
				white-space: nowrap;
			}
		}
	}
}

:deep(.uni-popup) {
	z-index: 101;
}

.withdraw-popup {
	background: url(/static/img/bg10.png) no-repeat;
	background-size: 100%;
	width: 291px;
	padding-top: 9px;
	margin-left: 62px;
	height: 480px;
	position: relative;

	.close-img {
		top: 83px;
	}

	.tab-box {
		position: absolute;
		left: -71px;
		top: 122px;

		.btn {
			background: #4ca664;
			width: 78px;
			height: 43px;
			padding: 6px 1px;
			box-sizing: border-box;
			color: #fff;
			font-size: 14px;
			font-weight: 700;
			border-top-left-radius: 6px;
			border-bottom-left-radius: 6px;
			margin-bottom: 9px;
			line-height: 15px;

			&.active {
				background: #ed8539;
			}

			&.recharge-text {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 15px;
			}
		}
	}

	.title {
		margin-top: 57px;
		font-size: 20px;
		color: #fff;
		font-weight: 700;
	}

	.contents {
		height: auto;
		padding: 0;
		padding-top: 41px;
		flex-wrap: wrap;
		box-sizing: border-box;

		.inp-wrap {
			width: 99%;
			padding: 0 5px;
			background: #fddeaf;

			.input {
				color: #885625;
				font-size: 12px;
				height: 18px;
				border: none;
				background: transparent;
				outline: none;
				width: 100%;
				box-sizing: border-box;
			}
		}

		.record-skip {
			position: absolute;
			right: 26px;
			top: 104px;
			color: #885625;
			font-size: 15px;
			font-weight: 700;
			text-align: center;

			.withdraw-log {
				width: 41px;
				height: 43px;
			}

			.text {
				margin-top: -14px;
				position: relative;
				z-index: 10;
			}
		}

		.re-name {
			width: 100%;
			margin-bottom: 5px;
			color: #885625;
			font-size: 15px;
			font-weight: 700;
			white-space: nowrap;

			.dbx-icon {
				width: 11px;
				height: 11px;
				margin-right: 5px;
			}
		}

		.num {
			color: #ed8539;
			font-size: 17px;
			font-weight: 700;
			margin-bottom: 10px;
			text-align: left;
			padding-left: 14px;

			.address {
				color: #5c8a50;
				font-size: 13px;
			}

			.copy-icon {
				min-width: 16px;
				width: 16px;
				height: 16px;
				margin-left: 5px;
			}

			.inp-wrap {
				width: 99%;
				padding: 0 5px;
				background: #fddeaf;

				.input {
					color: #885625;
					font-size: 12px;
					height: 18px;
					border: none;
					background: transparent;
					outline: none;
					width: 100%;
					box-sizing: border-box;
				}

				.all {
					width: 42px;
					height: 20px;
					line-height: 20px;
					background: #4ca664;
					border-radius: 3px;
					color: #fff;
					font-size: 13px;
					font-weight: 700;
					cursor: pointer;
				}

				.RechargeBtn {
					min-width: 42px;
					padding: 0 5px;
					height: 20px;
					line-height: 20px;
					background: #4ca664;
					border-radius: 3px;
					color: #fff;
					font-size: 13px;
					font-weight: 700;
					cursor: pointer;
				}
			}

			.fee-text {
				color: #ac8953;
				font-size: 13px;
				margin-top: 7px;
			}
		}

		.btn {
			width: 135px;
			height: 41px;
			line-height: 34px;
			text-align: center;
			margin: 0 auto;
			background: url(/static/img/out-login.png) no-repeat;
			background-size: 100%;
			color: #fff;
			font-size: 14px;
			font-weight: 700;
			margin-top: 10px;
		}

		.recharge-address {
			width: 100%;
			margin-bottom: 20px;
			color: #885625;
			font-size: 20px;
			font-weight: 700;
		}

		.recharge-address-wallet {
			width: 100%;
			color: #ed8539;
			font-size: 17px;
			font-weight: 700;
			margin-bottom: 10px;
			text-align: left;
			padding-left: 14px;
			padding: 0 6px;

			.address-wallet {
				display: flex;
				align-items: center;
				margin-top: 9px;
				color: #5c8a50;
				font-size: 13px;
				width: 100%;
				overflow: hidden;

				.wallet-title {
					width: 30%;
					font-size: 14px;
					color: #885625;
					flex-shrink: 0;
					text-align: right;
				}

				.wallet-text {
					overflow: hidden;
					word-wrap: break-word;
					word-break: break-all;
					flex: 1;
				}
			}

			.copy-icon {
				min-width: 16px;
				width: 16px;
				height: 16px;
				margin-left: 5px;
				flex-shrink: 0;
			}
		}

		.recharge-prompt {
			width: 100%;
			height: 52px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 25%;
			border: 1px solid #5c8a50;
			border-radius: 15px;
			background-color: #5c8a50;
			color: #ff0;
		}
	}
}

.withdraw-record-popup-box {
	background: url(/static/img/bg11.png) no-repeat;
	background-size: 100%;
	height: 561px;
	width: 314px;
	padding-top: 9px;

	.close-img {
		top: 33px;
	}

	.title {
		color: #c67f3c;
		font-size: 15px;
		font-weight: 700;
		margin-top: 19px;
	}

	.contents {
		width: 100%;
		height: 410px;
		margin-top: 26px;
		padding-top: 15px;
		box-sizing: border-box;
		overflow: auto;

		.lists {
			width: 100%;
			padding: 12px 15px;
			box-sizing: border-box;
			background: #fff;
			box-shadow: 0 1px 3px 0 rgba(147, 148, 127, 0.39);
			border-radius: 6px;
			margin-bottom: 10px;

			.record-header {
				width: 100%;
				margin-bottom: 8px;

				.user-info {
					flex: 1;
					display: flex;
					align-items: center;

					.event-type-inline {
						color: #4ca664;
						font-size: 14px;
						font-weight: 600;
					}

					.item-name {
						color: #b89663;
						font-size: 13px;
						font-weight: 500;
					}
				}

				.amount {
					color: #ed8539;
					font-size: 18px;
					font-weight: 700;
					text-align: right;
				}
			}

			.record-details {
				width: 100%;
				padding-top: 8px;
				border-top: 1px solid #f0f0f0;

				.timers {
					color: #b89663;
					font-size: 13px;
					font-weight: 500;
					text-align: left;
				}
			}
		}

		.no-data {
			margin-top: 83px;
			width: 100%;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 10;

			.img {
				width: 81px;
				height: 115px;
				text-align: center;
			}

			.no-text {
				color: #a27b6e;
				font-size: 15px;
				font-weight: 700;
				margin-top: 12px;
			}
		}
	}

	.model-content {
		width: 256px;
		min-height: 201px;
		padding: 7px 15px;
		box-sizing: border-box;
		position: relative;

		.close-img {
			position: absolute !important;
			width: 37px;
			height: 37px;
			right: -7px;
		}

		.contents {
			width: 100%;
			height: 410px;
			margin-top: 26px;
			overflow: auto;
		}
	}
}

.journal-popup-box {
	background: url(/static/img/bg11.png) no-repeat;
	background-size: 100%;
	width: 302px;
	padding-top: 9px;
	height: 540px;
	position: relative;

	.close-img {
		top: 32px;
	}

	.title {
		margin-top: 15px;
		font-size: 22px;
		color: #c67f3c;
		font-weight: 700;
	}

	.tag-wrapper {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		gap: 5px;
	}

	.tag-item {
		flex: 1;
		width: 100%;
		height: 30px;
		padding: 0 5px;
		line-height: 30px;
		text-align: center;
		background: #7cdd94;
		border-radius: 8px;
		color: #fff;
		font-size: 13px;
	}

	.tag-item.active {
		background: #4ca664;
	}

	.contents {
		width: 100%;
		height: 390px;
		margin-top: 4px;
		overflow: auto;
		padding-top: 0;

		.lists {
			width: 100%;
			padding: 8px 7px;
			box-sizing: border-box;
			background: #fff;
			box-shadow: 0 1px 2px 0 rgba(147, 148, 127, 0.39);
			border-radius: 1px;
			margin-bottom: 8px;

			.names-top {
				width: 100%;
				color: #885625;
				font-size: 16px;
				flex-wrap: wrap;
				font-weight: 700;
				margin-bottom: 7px;

				.status {
					color: #4292ff;
					margin-left: 4px;
					margin-right: 4px;
				}
			}

			.timers {
				width: 100%;
				color: #b89663;
				font-size: 13px;
				font-weight: 700;
			}
		}

		.no-data {
			margin-top: 80px;
			width: 100%;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 10;

			.img {
				width: 78px;
				height: 111px;
				text-align: center;
			}

			.no-text {
				color: #a27b6e;
				font-size: 15px;
				font-weight: 700;
				margin-top: 12px;
			}
		}
	}

	.page-box {
		margin-top: 2px;
		flex-direction: column;
		gap: 8px;

		.loading-indicator {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(255, 255, 255, 0.8);
			z-index: 10;
			border-radius: 4px;

			.loading-text {
				color: #84ba77;
				font-size: 12px;
				font-weight: 500;
			}
		}

		.page-list {
			margin-bottom: 8px;
			width: 100%;
			position: relative;

			&.loading {
				opacity: 0.6;
				pointer-events: none;
			}

			.list-page {
				width: 28px;
				height: 30px;
				margin: 0 6px;
				cursor: pointer;
				transition: opacity 0.3s;

				&.disabled {
					opacity: 0.4;
					cursor: not-allowed;
				}
			}

			.sum {
				color: #84ba77;
				font-size: 15px;
				font-weight: 700;
				margin: 0 4px;
				cursor: pointer;
				transition: all 0.3s;

				&.active {
					color: #e4960e;
				}

				&:not(.active):not(.ellipsis):hover {
					background: rgba(132, 186, 119, 0.1);
				}

				&.ellipsis {
					cursor: default;
					color: #999;
				}
			}
		}
	}
}

.raiders-popup-box {
	background: url(/static/img/bg12.png) no-repeat;
	background-size: 100%;
	width: 323px;
	padding-top: 5px;
	height: 480px;
	position: relative;

	.close-img {
		width: 40px;
		height: 40px;
		top: 14px;
		right: 10px;
	}

	.title {
		margin-top: 15px;
		font-size: 20px;
		color: #b8752b;
		font-weight: 700;
	}

	.contents {
		width: 100%;
		height: 380px;
		padding-top: 2px;
		margin-top: 0;
		overflow: auto;
		padding: 0 17px;

		.lists {
			width: 100%;
			border-bottom: 1px solid rgba(0, 74, 127, 0.1);
			padding: 10px 0;
			box-sizing: border-box;
			color: #3b713a;
			font-size: 17px;
			font-weight: 700;

			.names-top {
				width: 100%;
				color: #885625;
				font-size: 16px;
				flex-wrap: wrap;
				font-weight: 700;
				margin-bottom: 7px;

				.status {
					color: #4292ff;
					margin-left: 4px;
					margin-right: 4px;
				}
			}

			.rights {
				min-width: 7px;
				width: 7px;
				height: 12px;
				margin-left: 4px;
			}
		}

		.ra-text {
			color: #3b713a;
			font-size: 17px;
			font-weight: 700;
			margin-bottom: 12px;
			text-align: left;
			margin-top: 10px;
		}

		.ra-title {
			color: #679166;
			font-size: 14px;
			font-weight: 700;
			line-height: 18px;
			text-align: left;

			ul {
				padding-left: 40px;
			}
		}

		.no-data {
			margin-top: 80px;
			width: 100%;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 10;

			.img {
				width: 78px;
				height: 111px;
				text-align: center;
			}

			.no-text {
				color: #a27b6e;
				font-size: 15px;
				font-weight: 700;
				margin-top: 12px;
			}
		}
	}

	.page-box {
		margin-top: 10px;
		flex-direction: column;
		gap: 8px;

		.page-list {
			margin-bottom: 8px;
			width: 100%;

			.list-page {
				width: 28px;
				height: 30px;
				margin: 0 6px;
				cursor: pointer;
				transition: opacity 0.3s;

				&.disabled {
					opacity: 0.4;
					cursor: not-allowed;
				}
			}

			.sum {
				color: #58934e;
				font-size: 15px;
				font-weight: 700;
				margin: 0 4px;
				cursor: pointer;
				transition: all 0.3s;

				&.active {
					color: #ecee30;
				}

				&:not(.active):not(.ellipsis):hover {
					background: rgba(88, 147, 78, 0.1);
				}

				&.ellipsis {
					cursor: default;
					color: #999;
				}
			}
		}
	}

	.return-text {
		color: #3b713a;
		font-size: 17px;
		font-weight: 700;
		margin-top: 10px;

		.img {
			width: 7px;
			height: 12px;
			margin-right: 7px;
		}
	}
}

.email-popup-box {
	background: url(/static/img/bg13.png) no-repeat;
	background-size: 100%;
	width: 339px;
	padding-top: 5px;
	height: 557px;
	position: relative;

	.close-img {
		top: 10px;
		right: 12px;
	}

	.contents {
		width: 100%;
		height: 405px;
		overflow: auto;
		padding: 0 19px;
		margin-top: 75px;

		.lists {
			width: 100%;
			padding: 8px 7px;
			box-sizing: border-box;
			background: #fff;
			box-shadow: 0 1px 2px 0 rgba(147, 148, 127, 0.39);
			border-radius: 1px;
			margin-bottom: 8px;

			.names-top {
				width: 100%;
				color: #885625;
				font-size: 16px;
				flex-wrap: wrap;
				font-weight: 700;
				margin-bottom: 7px;

				.status {
					color: #4292ff;
					margin-left: 4px;
					margin-right: 4px;
				}
			}

			.timers {
				width: 100%;
				color: #b89663;
				font-size: 13px;
				font-weight: 700;
			}
		}

		.no-data {
			margin-top: 80px;
			width: 100%;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 10;

			.img {
				width: 78px;
				height: 111px;
				text-align: center;
			}

			.no-text {
				color: #a27b6e;
				font-size: 15px;
				font-weight: 700;
				margin-top: 12px;
			}
		}
	}

	.page-box {
		margin-top: 10px;
		flex-direction: column;
		gap: 8px;

		.page-list {
			margin-bottom: 8px;
			width: 100%;

			.list-page {
				width: 28px;
				height: 30px;
				margin: 0 6px;
				cursor: pointer;
				transition: opacity 0.3s;

				&.disabled {
					opacity: 0.4;
					cursor: not-allowed;
				}
			}

			.sum {
				color: #84ba77;
				font-size: 15px;
				font-weight: 700;
				margin: 0 2px;
				min-width: 28px;
				height: 28px;
				border-radius: 4px;
				cursor: pointer;
				transition: all 0.3s;
				border: 1px solid transparent;

				&.active {
					color: #fff;
					background: #e4960e;
					border-color: #e4960e;
				}

				&:not(.active):not(.ellipsis):hover {
					background: rgba(132, 186, 119, 0.1);
					border-color: #84ba77;
				}

				&.ellipsis {
					cursor: default;
					color: #999;
				}
			}
		}

		.page-info {
			margin-top: 4px;
			flex-direction: column;
			gap: 6px;

			.info-text {
				color: #84ba77;
				font-size: 12px;
				font-weight: 500;
			}

			.jump-box {
				gap: 4px;

				.jump-text {
					color: #84ba77;
					font-size: 12px;
					font-weight: 500;
				}

				.jump-input {
					width: 50px;
					height: 24px;
					background: rgba(255, 255, 255, 0.9);
					border: 1px solid #84ba77;
					border-radius: 4px;
					text-align: center;
					font-size: 12px;
					color: #333;
					padding: 0 4px;
					box-sizing: border-box;

					&::placeholder {
						color: #999;
						font-size: 10px;
					}
				}
			}
		}
	}
}

.rebate-popup-box {
	background: url(/static/img/bg11.png) no-repeat;
	background-size: 100%;
	height: 540px;
	width: 302px;
	padding-top: 9px;
	position: relative;

	.close-img {
		top: 32px;
	}

	.title {
		color: #c67f3c;
		font-size: 15px;
		margin-top: 19px;
		font-weight: 700;
	}

	.contents {
		width: 100%;
		height: 395px;
		margin-top: 25px;
		overflow: auto;

		.lists {
			width: 100%;
			padding: 8px 7px;
			box-sizing: border-box;
			background: #fff;
			box-shadow: 0 1px 2px 0 rgba(147, 148, 127, 0.39);
			border-radius: 1px;
			margin-bottom: 8px;

			.names-top {
				width: 100%;
				color: #885625;
				font-size: 16px;
				flex-wrap: wrap;
				font-weight: 700;
				margin-bottom: 7px;
				display: flex;
				justify-content: space-between;

				.status {
					margin-left: 4px;
					margin-right: 4px;

					.jia {
						color: #4292ff;
					}

					.jian {
						color: red;
					}
				}
			}

			.timers {
				width: 100%;
				color: #b89663;
				font-size: 13px;
				font-weight: 700;
			}
		}

		.no-data {
			margin-top: 80px;
			width: 100%;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 10;

			.img {
				width: 78px;
				height: 111px;
				text-align: center;
			}

			.no-text {
				color: #a27b6e;
				font-size: 15px;
				font-weight: 700;
				margin-top: 12px;
			}
		}
	}

	.page-box {
		margin-top: 10px;
		flex-direction: column;
		gap: 8px;

		.page-list {
			margin-bottom: 8px;
			width: 100%;

			.list-page {
				width: 28px;
				height: 30px;
				margin: 0 6px;
				cursor: pointer;
				transition: opacity 0.3s;

				&.disabled {
					opacity: 0.4;
					cursor: not-allowed;
				}
			}

			.sum {
				color: #84ba77;
				font-size: 15px;
				font-weight: 700;
				margin: 0 4px;
				cursor: pointer;
				transition: all 0.3s;

				&.active {
					color: #e4960e;
				}

				&:not(.active):not(.ellipsis):hover {
					background: rgba(132, 186, 119, 0.1);
					border-color: #84ba77;
				}

				&.ellipsis {
					cursor: default;
					color: #999;
				}
			}
		}

		.page-info {
			margin-top: 4px;
			flex-direction: column;
			gap: 6px;

			.info-text {
				color: #84ba77;
				font-size: 12px;
				font-weight: 500;
			}

			.jump-box {
				gap: 4px;

				.jump-text {
					color: #84ba77;
					font-size: 12px;
					font-weight: 500;
				}

				.jump-input {
					width: 50px;
					height: 24px;
					background: rgba(255, 255, 255, 0.9);
					border: 1px solid #84ba77;
					border-radius: 4px;
					text-align: center;
					font-size: 12px;
					color: #333;
					padding: 0 4px;
					box-sizing: border-box;

					&::placeholder {
						color: #999;
						font-size: 10px;
					}
				}
			}
		}
	}
}

/* 辅助类 */
.flex-lr {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.flex-l {
	display: flex;
	align-items: center;
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-top-l {
	display: flex;
	align-items: flex-start;
}

.flex-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.text-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hidden {
	display: none;
}
</style>